<template>
  <div class="full-width relative">
    <!-- 工具栏 -->
    <trigger-tool
      :columns="columns"
      ref="triggerTool"
      @showHead="showHead"
      @doLayout="doLayout"
      :alllHead="alllHead"
      v-show="showTool"
      :listRule="listRule"
      :exportApi="exportApi"
      :searchData="searchData"
      @exportData="exportData"
      :convertList="convertList"
      :chooseList="chooseList"
      :selectionShow="selectionShow"
    ></trigger-tool>

    <el-table
      v-bind="$attrs"
      :data="listData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
      :height="tableHeight"
      class="table-fixed"
      ref="dataTable"
      :span-method="arraySpanMethod"
      :cell-class-name="addClass"
      @row-click="rowClick"
      @selection-change="selectionLineChangeHandle"
      :lazy="lazyShow"
      :load="lazyLoad"
      :row-key="rowKey"
      :tree-props="treeProps"
      :show-summary="showSummary"
      :summary-method="getSummaries"
      :default-expand-all="defaultExpandAll"
      :expand-row-keys="expandRowKeys"
    >
      <slot name="prepend" />
      <el-table-column
        type="selection"
        fixed="left"
        class-name="zoomName"
        v-if="selectionShow"
        reserve-selection
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        width="50"
        label="选择"
        v-if="singleSelectionShow"
      >
        <template slot-scope="scope">
          <el-radio
            class="radio"
            v-model="templateSelection"
            style="color: #fff; padding-left: 10px; margin-right: -25px;;"
            :label="scope.row.userName"
            >&nbsp;&nbsp;&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in showColumns"
        :key="item.field"
        :header-align="item.headerAlign ? item.headerAlign : 'center'"
        :align="item.align ? item.align : 'center'"
        :fixed="item.fixed ? item.fixed : false"
        :label="item.title"
        :width="item.width"
        :property="item.field"
      >
        <template slot-scope="scope">
          <div v-if="item.popover">
            <el-popover trigger="hover" placement="top">
              <div v-html="item.popover(scope.row[item.field])"></div>
              <div slot="reference" class="name-wrapper pointer">
                <el-tag size="medium" class="pointer">{{
                  item.popoverText(scope.row[item.field])
                }}</el-tag>
              </div>
            </el-popover>
          </div>
          <div
            v-else-if="item.html"
            v-html="item.html(scope.row[item.field])"
          />
          <span v-else>
            {{
              item.filter
                ? item.filter(scope.row[item.field], scope.row)
                : getData(scope.row[item.field]) || "无"
            }}
          </span>
        </template>
      </el-table-column>
      <slot name="append" />
      <el-table-column
        label="操作"
        align="center"
        :width="btnGroupWidth"
        :fixed="fixedRight ? 'right' : false"
        class-name="small-padding fixed-width"
        :className="ifFixedWidth ? 'column-group' : ''"
        v-if="columns.length > 0 && controlShow"
      >
        <template slot="empty">
          <el-empty :image-size="100" :description="noText"></el-empty>
        </template>
        <template slot-scope="scope">
          <div
            class="group"
            :class="ifFixedWidth ? 'flex flex-wrap' : ''"
            :style="ifFixedWidth ? `width:${ifFixedWidth}px` : ''"
          >
            <slot name="btn-group" :row="scope.row" />
            <el-button
              v-show="showLook"
              size="mini"
              @click.stop="$emit('look', scope.row)"
            >
              {{ lookText }}
            </el-button>
            <el-button
              v-show="showEdit"
              type="primary"
              size="mini"
              @click.stop="$emit('edit', scope.row)"
            >
              {{ editText }}
            </el-button>
            <el-popconfirm
              :confirm-button-text="removeText"
              confirm-button-type="danger"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              :title="
                removeText +
                  '后该条信息将从列表中移除，请确认是否' +
                  removeText +
                  '~'
              "
              @onConfirm="$emit('remove', scope.row)"
            >
              <el-button
                v-show="showRemove"
                slot="reference"
                type="danger"
                size="mini"
              >
                {{ removeText }}
              </el-button>
            </el-popconfirm>
            <slot name="btn-after" :row="scope.row" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import triggerTool from "./triggerTool.vue";
export default {
  components: { triggerTool },
  props: {
    tableHeight: {
      default: 700,
      type: Number
    },
    listData: {
      default: [],
      type: Array
    },
    listRule: {
      //控制列表列的显示
      default: [],
      type: Array
    },
    controlShow: {
      type: Boolean,
      default: true
    },
    selectionShow: {
      type: Boolean,
      default: false
    },
    showTool: {
      type: Boolean,
      default: false
    },
    showLook: {
      default: false,
      type: Boolean
    },
    showEdit: {
      //显示编辑按钮
      default: true,
      type: Boolean
    },
    showRemove: {
      //显示删除按钮
      default: true,
      type: Boolean
    },
    ifFixedWidth: {
      //显示删除按钮
      default: 0,
      type: Number
    },
    btnGroupWidth: {
      // 按钮组宽度
      default: "200px",
      type: String
    },
    fixedRight: {
      //是否操作固定
      default: false,
      type: Boolean
    },
    lookText: {
      default: "查看",
      type: String
    },
    editText: {
      //编辑按钮文字
      default: "编辑",
      type: String
    },
    removeText: {
      default: "删除",
      type: String
    },
    noText: {
      default: "暂无数据",
      type: String
    },
    arraySpanMethod: {
      type: Function,
      default: () => {}
    },
    addClass: {
      type: Function,
      default: () => {}
    },
    lazyShow: {
      type: Boolean,
      default: false
    },
    lazyLoad: {
      type: Function,
      default: () => {
        return [];
      }
    },
    treeProps: {
      type: Object,
      default: () => {
        return { children: "children", hasChildren: true };
      }
    },
    rowKey: {
      type: String,
      default: "id"
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    getSummaries: {
      type: Function,
      default: () => {
        return () => {};
      }
    },
    expandRowKeys: {
      type: Array,
      default: () => {
        return [];
      }
    },
    singleSelectionShow: {
      type: Boolean,
      default: false
    },
    templateSelection: {
      type: String,
      default: ""
    },
    /**
     * @name 导出查询数据的api
     */
    exportApi: {
      type: Function,
      default: () => {
        return () => {};
      }
    },
    /**
     * @name 导出的查询条件
     */
    exportSearch: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /**
     * @name 当有中文格式数据
     */
    convertList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * @name 勾选中的数据
     */
    chooseList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * @name 是否开启自动滚动
     */
    autoScroll: {
      type: Boolean,
      default: false
    },
    /**
     * @name 配置自动滚动参数
     */
    scrollConfig: {
      type: Object,
      default: () => {
        return {
          timeLine: 1200, //默认一秒跳动
          scrollTop: 48 //累加
        };
      }
    }
  },
  data() {
    return {
      headList: [],
      timer: null
    };
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.headList = this.alllHead;
      if (this.autoScroll) {
        this.infinitScroll();
      }
    });
  },
  watch: {
    listRule(n) {
      console.log("改变了");
      this.$nextTick(() => {
        this.headList = this.alllHead;
      });
    }
  },
  computed: {
    searchData() {
      return {
        ...this.exportSearch
      };
    },
    columns() {
      return this.listRule.filter(v => v.tableVisible);
    },
    showColumns() {
      return this.columns.filter(v => {
        return this.headList.includes(v.field);
      });
    },
    alllHead() {
      if (!this.columns.length) return [];
      let params = [];
      this.columns.forEach(e => {
        params.push(e.field);
      });
      return params;
    }
  },
  methods: {
    infinitScroll() {
      let that = this;
      const table = this.$refs.dataTable;
      const divData = table.bodyWrapper;
      divData.onmouseover = function() {
        clearInterval(that.timer);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function() {
        start();
      }; //鼠标移出，继续滚动
      let t;
      function start() {
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        that.timer = setInterval(() => {
          divData.scrollTo({
            top: divData.scrollTop + that.scrollConfig.scrollTop,
            behavior: "smooth"
          });
          if (
            //四舍五入判断滚动条位置
            Math.round(divData.clientHeight + divData.scrollTop) >=
            divData.scrollHeight
          ) {
            if (that.timer) {
              clearInterval(that.timer);
              divData.scrollTo({ top: 0, behavior: "smooth" });
              setTimeout(() => {
                start();
              }, 500);
            }
          }
        }, that.scrollConfig.timeLine);
      }

      this.$nextTick(() => {
        setTimeout(() => {
          start();
        }, 1000);
      });
    },
    /**
     * @name 全选表头
     */
    showHead(e) {
      this.headList = e;
    },
    getData(item) {
      let data = "";
      if (item === 0 || item) {
        data = item.toString();
      }
      return data;
    },
    selectionLineChangeHandle(e) {
      this.$emit("setHasSelectList", e);
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout();
      });
    },
    rowClick(e) {
      this.$emit("rowClick", e);
    },
    exportData(e) {
      this.$emit("exportData", e);
    }
  }
};
</script>

<style lang="scss" scoped>
.group {
  white-space: nowrap;
}
.group::v-deep > * {
  margin-right: 8px;
  margin-left: 0px;
}
</style>
<style lang="scss">
.table-fixed {
  /deep/ .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }

  /deep/ .el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}
.el-checkbox__inner {
  zoom: 140%;
}
</style>
